/* pages/goodList/index.wxss */



.goodList-top {
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  margin: 20rpx;
  position: relative;
  flex-wrap: nowrap;
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
   &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    color:#ffffff;
   }
    
   
   /*定义滚动条轨道 内阴影+圆角*/
   &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    // border-radius: 10px;
    background-color:#FFFFFF;
   }
    
   /*定义滑块 内阴影+圆角*/
   &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    // -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color:white;
   }
  
}


.goodList-top-item {

  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  padding:0 20rpx;
  // flex: 1;
  // text-align: center;
  // margin: 0px 10rpx 0 10rpx;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  // 
  &.active{
    background-color: black;
    color:white;

  }
}

.goodList-top-item.active {
  border-bottom: 5rpx solid black;
}

.border-line {
  width: 60rpx;
  height: 4rpx;
  position: absolute;
  bottom: 10rpx;
  &.active{
    background-color: black;
  }
}

.goodList-filter-item {
  padding:0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  color: #989797;
  &.active{
    // background-color: black;
    color:black;
    // font-weight: bold;

  }
}

.goodList-filter-item.active {
  // border-bottom: 5rpx solid black;
}


/* pages/goodList/index.wxss */



.goodList-filter {
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  margin: 20rpx;
  position: relative;
  flex-wrap: nowrap;
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
   &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    color:#ffffff;
   }
    
   
   /*定义滚动条轨道 内阴影+圆角*/
   &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    // border-radius: 10px;
    background-color:#FFFFFF;
   }
    
   /*定义滑块 内阴影+圆角*/
   &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    // -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color:white;
   }
  
}

.goodList-item-box{
  padding:20rpx;
  column-count: 2;
  column-gap: 20rpx;
  // display: grid;
  // grid-template-columns: repeat(3, 1fr); // 九宫格3列
  // grid-template-rows: repeat(3, 1fr); // 九宫格3行
  // gap: 10px; // 定义列与列之间和行与行之间的间隔
}

.goodList-item{
  min-height: 350rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


.content {
  text-align: justify;
  background-color: #9e9e9e21;
}

.item {
  background-color: #fff;
  margin: 15rpx 0 0 15rpx;
  display: inline-block;
  width: 96%;
  border-radius: 17rpx;
  overflow: hidden;
}

.item-ava {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
}

.heart {
  width: 30rpx;
  height: 26rpx;
  margin-right: 8rpx;
}

.heart {
  display: flex;
  align-items: center;
}

.item-img {
  width: 100%
}

.item-title {
  font-size: 24rpx;
  text-overflow: ellipsis;
  // display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-family: 'PingFang SC-Medium';
  color: #1e1e1e;
  margin: 15rpx;
  line-height: 27rpx;
}

.item .name {
  display: flex;
  padding: 0 15rpx;
  margin-top: 20rpx;
  padding-bottom: 10rpx;
  align-items: center;
  font-size: 22rpx;
  color: #1e1e1e;
  font-family: 'PingFang SC-Medium';
}

.name .image {
  flex: 0 0 auto;
}

.item-title-box {
  display: flex;
  position: relative;
}

.name-title {
  flex: 1;
  margin-left: 18rpx;
  margin-right: 20rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.name text:last-child {
  color: #c4c4c4;
  text-decoration: underline;
  line-height: 10rpx;

}

.left,
.right {
  display: inline-block;
  vertical-align: top;
  width: 49%;
}

